<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-vue使用步骤</title>
</head>
<body>
    <div id="app">
        <h3>小鹿的书架</h3>
        <ul>
            <li v-for="element in books" :key="element.id">
                <span>{{element.name}}</span>
                <span>{{element.author}}</span>
                <button @click="del(element.id)">删除</button>
            </li>
        </ul>
    </div>

    <!--导入vue.js-->
    <script src="js/vue.js"></script>

    <script>
        /*创建vue实例对象*/
        let app = new Vue({
            /*数据挂载的节点*/
            el: '#app',
            data:{
                books: [
                        {id:1,name:'<<西游记>>',author:'吴承恩'},
                        {id:2,name:'<<水浒传>>',author:'施耐庵'},
                        {id:3,name:'<<红楼梦>>',author:'曹雪芹'},
                        {id:4,name:'<<三国志>>',author:'罗贯中'}
                ]
            },
            methods: {
                del(id){
                    // filter创建一个新的数组
                    this.books = this.books.filter(item => item.id !== id)
                }
            }
        })

    </script>

</body>
</html>